<template>
	<div class="page">
		<Head navTitle="未结算赛事" isIndex/>
		<div class="page-container ">
			<div class="gm-flex flex">
				<div class="gm-sidebar ht-panel">
					<div class="gm-heading flex-center flex-zBetween">
						<div class="gm-time">2021-04-25 17:30:00</div>
						<el-button size="small" plain type="success" >刷新</el-button>
					</div>
					<div class="gm-card">
						<div class="gm-card-hd">正在交易</div>
						<div class="gm-card-data">
							<el-row >
								<el-col :xs="12" :sm="12" :lg="24">
									<div class="data-c">
										<div class="val text-yellow">340,908.00</div>
										<div class="text">总交易金额zongjiaoyijine</div>
									</div>
								</el-col>
								<el-col :xs="12" :sm="12" :lg="24">
									<div class="data-c">
										<div class="val text-green">12,786.00</div>
										<div class="text">总预估获利zongyugujine</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
				</div>
				<div class="flex_bd">
					<div class="bs-panel ht-panel">
						<div class="bs-table text-center" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
							<div class="bs-row thead">
								<div class="cell cell-id text-left">注单编号/下注时间</div>
								<div class="cell text-left">市场shichang</div>
								<div class="cell">波坦botan</div>
								<div class="cell">获利huoli</div>
								<div class="cell">下注金额xiazhujine</div>
								<div class="cell">预估获利yuguhuoli</div>
							</div>
							<div  class="bs-row" v-for="item in tableList" :key="item">
								<div class="cell cell-id" data-title="注单编号zhudanbianhao">
									<div class="item text-left">#2103470297492179247</div>
									<div class="item text-left">2021-04-26 19:00:00</div>
								</div>
								<div class="cell" data-title="市场shichang">
									<div class="item text-left">guangzhou citychongqingliangjiang athletlc</div>
									<div class="item text-left">04-26 19:00 中国超级联赛</div>
								</div>
								<div class="cell cell-3" data-title="波坦botan">
									<div class="item">3-1</div>
									<div class="item">正波</div>
								</div>
								<div class="cell cell-4" data-title="获利huoli"><span class="text-green">4.3%</span></div>
								<div class="cell cell-5" data-title="下注金额xaizhujine"><span class="text-orange">500,000.00</span></div>
								<div class="cell cell-6" data-title="预估获利yuguhuoli"><span class="text-green">8,246.00</span></div>
							</div>
						</div>
						<div class="load-more" ><i class="el-icon-loading"></i> 加载中...</div>
						<div class="load-more" v-if="noMore">没有更多了</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 手机foter -->
		<Foot :active="2" />
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	import Foot from "@/components/Foot.vue";
	export default {
		name: 'Home',
		components: {
			Head,Foot
		},
		data() {
			return {
				tableList:[1,2,4,5,7,1,2,4,5,7],
				loading: false,
				count: 6,
			};
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			}
		},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.tableList.push(this.tableList.length + 1);
					}
					this.loading = false
				}, 1000)
			},
		}
	}
</script>
